import { Button } from 'antd'
import axios from 'axios';
import React, { useState } from 'react'
import md5 from 'md5'
import { useTranslation } from 'react-i18next';


function Index() {
  const { t, i18n } = useTranslation();

  const text = '北京奥思研工智能科技有限公司版权所有';
  const APP_KEY = import.meta.env.VITE_APP_KEY;
  const APP_CREAT = import.meta.env.VITE_APP_CREAT;
  const salt = Date.now().toString()
  const sign = md5(`${APP_KEY}${text}${salt}${APP_CREAT}`)
  const [wen,setWen] = useState('')

  const handleFan = async () => {
    const { data } = await axios.get('/ydapi/api', {
      params: {
        q: text,
        from: 'auto',
        to: 'en',
        appKey: APP_KEY,
        salt,
        sign
      }
    })
    console.log(data,'翻译')
    console.log(data.translation[0])
    setWen(data.translation[0])
  }

  return (
    <div>
      {/* 有道翻译 */}
      <h1>
        {text}
      </h1>
      <h2>
        翻译:
        <p>
        {wen}
        </p>
      </h2>

      <Button onClick={() => handleFan()}>点击翻译</Button>


      <hr />
      <h3>中英文切换</h3>
      <h1>{t('Welcome to React')}</h1>
    </div>
  )
}

export default Index
